<script setup>
import { reactive, ref } from 'vue'
import { doPost } from '@/utils/httpRequest'
import { md5 } from 'js-md5'
import { ElMessage } from 'element-plus'
import router from '@/router'

// 声明登录信息对象
const loginform = ref('')
// reactive只可以接收对象类型，ref可以接受原始类型
// 声明表单对象
const form = reactive({
  loginName: 'admin',
  loginPwd: '111aaa',
})
// 声明登录信息验证规则
const rules = reactive({
  loginName: [
    { required: true, message: '请输入登录账号', trigger: 'blur' },
    { min: 5, max: 20, message: '登录账号必须是5-20个字符', trigger: 'blur' },
  ],
  loginPwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
})
// 声明登录函数
// 表单进行验证，判断表单是否为空，是否符合信息验证规则
const onLogin = async formRef => {
  if (!formRef) {
    return
  }
  await formRef.validate(valid => {
    if (valid) {
      // 利用md5加密表单中的密码值，重新赋值
      form.loginPwd = md5(form.loginPwd)
      doPost('/operator/access', form).then(resp => {
        // 存在响应且返回码为1000，提示登陆成功
        if (resp && resp.data.code == 1000) {
          ElMessage.success('登录成功')
          // 将token存入SessionStorage(只能存储字符串，对象需要先转化)
          let tokenJson = JSON.stringify(resp.data.data)
          sessionStorage.setItem('BOSS_TOKEN', tokenJson)
          // 利用路由对象跳转到主页面
          router.push({
            path: '/frame',
          })
        }
      })
    } else {
      ElMessage.warning('登录名或密码格式错误')
    }
  })
}
// 声明重置函数
const onReset = () => {
  Object.keys(form).forEach(key => {
    // 获取form对象的所有key值组成的数组，遍历后置空，以实现表单数据重置
    form[key] = ''
  })
}
</script>

<template>
  <div style="margin-top: 240px; margin-left: 420px">
    <el-row :gutter="20">
      <el-col :span="2" :offset="0">
        <img src="@/assets/powerLogo.png" width="125" height="125" />
      </el-col>
      <el-col :span="6" :offset="1">
        <el-form
          :model="form"
          ref="loginform"
          :rules="rules"
          label-width="80px"
          :inline="false"
        >
          <el-form-item label="登录名称" prop="loginName">
            <el-input v-model="form.loginName"></el-input>
          </el-form-item>

          <el-form-item label="登录密码" prop="loginPwd">
            <el-input v-model="form.loginPwd" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-space :size="60">
              <el-button
                type="success"
                round
                @click="onLogin(loginform)"
                style="margin-left: 40px"
              >
                登录
              </el-button>
              <el-button type="warning" round @click="onReset">重置</el-button>
            </el-space>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped></style>
